<template>
  <div class="reverseOrder">
    <el-card>
      <el-row type="flex" justify="space-between">
        <el-col :span="20">
          <el-form :model="form" ref="formRef" inline>
            <el-form-item label="">
              <el-select v-model="form.num" placeholder="">
                <el-option label="" value=""></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="form.num" placeholder="">
                <el-option label="" value=""></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="form.num" placeholder="">
                <el-option label="" value=""></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-date-picker
                v-model="form.value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2">
          <el-button type="primary">生成倒排计划</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待排订单" name="1">
          <el-row>
            <el-col :span="21">
              <el-form :model="searchForm" inline size="small">
                <el-form-item label="">
                  <el-input
                    v-model="searchForm.orderNum"
                    placeholder="订单号"
                  ></el-input>
                </el-form-item>
                <el-form-item label="">
                  <el-input
                    v-model="searchForm.name"
                    placeholder="客户名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="">
                  <el-input
                    v-model="searchForm.demand"
                    placeholder="需求量"
                  ></el-input>
                </el-form-item>
                <el-form-item label="">
                  <el-select
                    v-model="searchForm.department"
                    placeholder="业务部门"
                  >
                    <el-option label="" value=""></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="">
                  <el-select v-model="searchForm.clerk" placeholder="业务员">
                    <el-option label="" value=""></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="3" style="text-align: right">
              <el-button type="primary" size="small">查询</el-button>
              <el-button type="" size="small">重置</el-button>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="已排订单" name="2">
          <el-input
            placeholder="请输入内容"
            v-model="searchName"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-card>
      <second-table-list
        :total="total"
        :pageSize="page.pageSize"
        :current="page.page"
        @changePage="changePage"
        v-if="activeName == 1"
      >
        <my-table
          slot="table"
          :columns="columns"
          :data="tdata"
          :showSelection="true"
          @selectChange="selectChange"
          :showColumnSetting="false"
        >
          <template v-slot:batchDemand="{ row }"></template>
          <template v-slot:batchIndex="{ row }"></template>
          <template v-slot:batchDelivery="{ row }"></template>
          <template v-slot:batchPlanOnlineTime="{ row }"></template>
          <template v-slot:batchOutput="{ row }"></template>
          <template v-slot:bottleneckProcess="{ row }"></template>
          <template v-slot:circulationQuantity="{ row }"></template>
        </my-table>
      </second-table-list>
      <div v-if="activeName != 1">
        <second-table-list
          :total="total"
          :pageSize="page.pageSize"
          :current="page.page"
          @changePage="changePage"
        >
          <my-table
            slot="table"
            :columns="columns1"
            :data="tdata"
            :showSelection="true"
            @selectChange="selectChange"
            :showColumnSetting="false"
          >
            <template v-slot:overflow="{ row }"></template>
            <template v-slot:overtimeRequired="{ row }"></template>
          </my-table>
        </second-table-list>
      </div>
    </el-card>
    <el-card>
      <el-row type="flex" justify="space-between" class="rows">
        <h4>产能占比图</h4>
        <el-col :span="6">
          <el-row type="flex">
            <div>
              <i class="primary-icon"></i>
              <span>顺排结果</span>
            </div>
            <div>
              <i class="success-icon"></i>
              <span>倒排结果</span>
            </div>
            <div>
              <i class="danger-icon"></i>
              <span>超负荷</span>
            </div>
          </el-row>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-table
          class="table"
          :data="tableData"
          style="width: 100%"
          border
          row-class-name="row-class-name"
        >
          <el-table-column
            prop="typeName"
            label="时间"
            align="right"
            width="150"
            :fixed="true"
          >
            <!-- <template slot="header" slot-scope="scope">
              <div>123</div>
            </template> -->
            <el-table-column
              prop="typeName"
              label="名称"
              width="150"
              align="center"
              header-align="left"
              class-name="column-className"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column label="2023-01" align="center">
            <template v-for="week in ['W1', 'W2', 'W3', 'W4']">
              <el-table-column :label="week" align="center">
                <template v-for="day in [1, 2, 3, 4, 5, 6, 7]">
                  <el-table-column
                    :label="(parseInt(week.substr(1)) - 1) * 7 + day.toString()"
                    align="center"
                  >
                    <template slot-scope="{ row }">
                      <el-popover
                        placement="top-start"
                        title="锁表布"
                        width="200"
                        trigger="hover"
                        popper-class="table-popover"
                      >
                        <div class="popover-item">
                          <span>产能负荷率</span>
                          <p>100%</p>
                        </div>
                        <div class="popover-item">
                          <span>排产量</span>
                          <p>150000</p>
                        </div>
                        <div class="popover-item">
                          <span>订单数</span>
                          <p>3</p>
                        </div>
                        <div
                          slot="reference"
                          class="icon-label"
                          style="width: 100%; height: 100%; min-height: 40px"
                        >
                          <p class="primary-icon"></p>
                          <p class="success-icon"></p>
                          <p class="danger-icon"></p>
                        </div>
                      </el-popover>
                    </template>
                  </el-table-column>
                </template>
              </el-table-column>
            </template>
          </el-table-column>

          <!-- <el-table-column label="2023-01" align="center">
            <el-table-column label="W1" align="center">
              <el-table-column
                label="01"
                align="center"
                class-name="table-column-class-name"
              >
                <template slot-scope="{ row }">
                  <el-popover
                    placement="top-start"
                    title="标题"
                    width="200"
                    trigger="hover"
                    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
                  >
                    <div
                      slot="reference"
                      style="width: 100%; height: 100%; min-height: 40px"
                    ></div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="02" align="center"></el-table-column>
              <el-table-column label="03" align="center"></el-table-column>
              <el-table-column label="04" align="center"></el-table-column>
              <el-table-column label="05" align="center"></el-table-column>
              <el-table-column label="06" align="center"></el-table-column>
              <el-table-column label="07" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="W2" align="center">
              <el-table-column label="08" align="center"></el-table-column>
              <el-table-column label="09" align="center"></el-table-column>
              <el-table-column label="10" align="center"></el-table-column>
              <el-table-column label="11" align="center"></el-table-column>
              <el-table-column label="12" align="center"></el-table-column>
              <el-table-column label="13" align="center"></el-table-column>
              <el-table-column label="14" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="W3" align="center">
              <el-table-column label="15" align="center"></el-table-column>
              <el-table-column label="16" align="center"></el-table-column>
              <el-table-column label="17" align="center"></el-table-column>
              <el-table-column label="18" align="center"></el-table-column>
              <el-table-column label="19" align="center"></el-table-column>
              <el-table-column label="20" align="center"></el-table-column>
              <el-table-column label="21" align="center"></el-table-column>
            </el-table-column>
            <el-table-column label="W4" align="center">
              <el-table-column label="22" align="center"></el-table-column>
              <el-table-column label="23" align="center"></el-table-column>
              <el-table-column label="24" align="center"></el-table-column>
              <el-table-column label="25" align="center"></el-table-column>
              <el-table-column label="26" align="center"></el-table-column>
              <el-table-column label="27" align="center"></el-table-column>
              <el-table-column label="28" align="center"></el-table-column>
            </el-table-column>
          </el-table-column> -->
        </el-table>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import secondTableList from "@/components/table/secondTableList";
import myTable from "@/components/table/myTable";
export default {
  components: { secondTableList, myTable },
  data() {
    return {
      form: {},
      activeName: "1",
      searchForm: {},
      searchName: "",
      total: 0,
      page: {
        page: 1,
        pageSize: 10,
      },

      columns: [
        {
          label: "排产流水号",
          prop: "num",
          fixed: true,
        },
        {
          label: "优先级",
          prop: "name",
          fixed: true,
        },
        {
          label: "订单编号",
          prop: "name",
        },
        {
          label: "外协合同号",
          prop: "num",
        },
        {
          label: "订单需求量",
          prop: "num",
        },
        {
          label: "批次需求量",
          prop: "batchDemand",
          slot: "batchDemand",
        },
        {
          label: "批次序号",
          prop: "batchIndex",
          slot: "batchIndex",
        },
        {
          label: "批次交期",
          prop: "batchDelivery",
          slot: "batchDelivery",
        },
        {
          label: "批次计划上线时间",
          prop: "batchPlanOnlineTime",
          slot: "batchPlanOnlineTime",
        },
        {
          label: "批次可生产时间(h)",
          prop: "num",
        },
        {
          label: "本厂可产量",
          prop: "name",
        },
        {
          label: "建议排产量",
          prop: "num",
        },
        {
          label: "产品大类",
          prop: "num",
        },
        {
          label: "产品信息",
          prop: "name",
        },
        {
          label: "最晚下线时间",
          prop: "num",
        },
        {
          label: "待排产量",
          prop: "num",
          fixed: "right",
        },
        {
          label: "批次溢出量",
          prop: "name",
          fixed: "right",
        },
        {
          label: "需加班时间(h)",
          prop: "num",
          fixed: "right",
        },
        {
          label: "瓶颈工序",
          prop: "bottleneckProcess",
          slot: "bottleneckProcess",
          fixed: "right",
        },
        {
          label: "批次排产量",
          prop: "batchOutput",
          slot: "batchOutput",
          fixed: "right",
        },
        {
          label: "流转数量(件)",
          prop: "circulationQuantity",
          slot: "circulationQuantity",
          fixed: "right",
        },
      ],
      columns1: [
        {
          label: "排产流水号",
          prop: "num",
          fixed: true,
        },
        {
          label: "优先级",
          prop: "name",
          fixed: true,
        },
        {
          label: "订单编号",
          prop: "name",
        },
        {
          label: "外协合同号",
          prop: "num",
        },
        {
          label: "产品大类",
          prop: "num",
        },
        {
          label: "批次",
          prop: "batchDemand",
        },
        {
          label: "订单需求量",
          prop: "batchIndex",
        },
        {
          label: "批次需求量",
          prop: "batchDelivery",
        },
        {
          label: "批次交期",
          prop: "batchPlanOnlineTime",
          sortable: true,
        },
        {
          label: "批次上线时间",
          prop: "num",
          sortable: true,
        },
        {
          label: "最早下线时间",
          prop: "name",
          sortable: true,
        },
        {
          label: "最晚下线时间",
          prop: "num",
          sortable: true,
        },
        {
          label: "可生产时间(h)",
          prop: "num",
        },
        {
          label: "加班时间(h)",
          prop: "name",
        },
        {
          label: "瓶颈工序",
          prop: "num",
        },
        {
          label: "本厂可产量",
          prop: "num",
        },
        {
          label: "实际排产",
          prop: "name",
        },
        {
          label: "流转数量(件)",
          prop: "num",
        },
        {
          label: "流转次数(次)",
          prop: "bottleneckProcess",
        },
        {
          label: "单次流转制成时间",
          prop: "batchOutput",
        },
        {
          label: "订单制成周期(s)",
          prop: "circulationQuantity",
        },
        {
          label: "订单制成天数",
          prop: "circulationQuantity",
        },
        {
          label: "溢出量",
          prop: "overflow",
          slot: "overflow",
          fixed: "right",
        },
        {
          label: "需加班时间(h)",
          prop: "overtimeRequired",
          slot: "overtimeRequired",
          fixed: "right",
        },
        {
          label: "操作",
          prop: "action",
          slot: "aciton",
          fixed: "right",
        },
      ],
      tdata: [],
      selectChangeList: [],
      tableData: [
        {
          typeName: "产品类别：被套类",
        },
      ],
      week: {},
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.getEcharts();
    });
  },
  methods: {
    changePage(val) {
      this.page = val;
    },
    handleClick() {},
    selectChange(val) {
      this.selectChangeList = val;
    },
    getEcharts() {},
  },
};
</script>

<style scoped lang="scss">
@import "../../styles/element-variables.scss";
.reverseOrder {
  .el-card {
    margin-bottom: 20px;
  }
  .primary {
    color: $--color-primary;
  }
  .warning {
    color: $--color-warning;
  }
  .danger {
    color: $--color-danger;
  }
  .rows {
    h4 {
      margin: unset;
    }
    i {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 2px;
      margin-right: 10px;
    }

    span {
      color: #8fa1c9;
      font-size: 16px;
    }
    div {
      margin-left: 15px;
    }
  }
  .primary-icon {
    background: $--color-primary;
  }
  .success-icon {
    background: $--color-success;
  }
  .danger-icon {
    background: $--color-danger;
  }
  .table {
    margin: 20px 0;
  }
  ::v-deep .table thead.is-group tr:first-of-type th:first-of-type {
    border-bottom: none;
  }
  ::v-deep .el-table thead.is-group th.el-table__cell {
    background: unset;
  }
  ::v-deep .table thead.is-group tr:first-of-type th:first-of-type:before {
    content: "";
    position: absolute;
    width: 1px;
    height: 86px; /*这里需要自己调整，根据td的宽度和高度*/
    top: 0;
    left: 0;
    background-color: #bbb;
    opacity: 0.3;
    display: block;
    transform: rotate(-51.5deg); /*这里需要自己调整，根据线的位置*/
    transform-origin: top;
  }
  ::v-deep .is-group .column-className {
    &:before {
      content: "";
      position: absolute;
      width: 1px;
      height: 127px; /*这里需要自己调整，根据td的宽度和高度*/
      bottom: 0;
      right: 0;
      background-color: #bbb;
      opacity: 0.3;
      display: block;
      transform: rotate(-51deg); /*这里需要自己调整，根据线的位置*/
      transform-origin: bottom;
    }
  }
  //   ::v-deep .table thead.is-group tr:last-of-type th:first-of-type
  ::v-deep .table-column-class-name {
    min-height: 40px;
  }
  ::v-deep .table {
    .row-class-name {
      > :not(:first-child) {
        padding: unset;
        .cell {
          padding: unset;
        }
      }
    }
  }

  .icon-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 8px;
    p {
      margin-bottom: 10px;
      width: 50px;
      height: 12px;
      border-radius: 4px;
    }
  }
  .table-cell {
    color: #fff;
    background: #3091f2;
    height: 44px;
    margin: 3px;
  }
}
</style>
<style lang="scss">
@import "../../styles/element-variables.scss";

.table-popover {
  .el-popover__title {
    color: $--color-primary;
    font-weight: 800;
  }
}
.popover-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 5px;
  font-size: 16px;
  border-top: 1px solid#EBEDF2;
  span {
    color: #8fa1c9;
  }
  p {
    color: #111;
  }
}
</style>
